<style>
    .box{
        /*display: flex;*/
        /*flex-wrap: wrap;*/
    }
    .box >div{
        margin-bottom: 20px;
        margin-right: 20px;
    }
</style>
<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label">服务分类</label>
            <div class="layui-input-block">
                <select name="cla_id" lay-verify="required" class="layui-input" lay-filter="cla_id">
                    <option value="">--请选择--</option>
                    {volist name="classfcation" id="v"}
                    <option value="{$v.id}" {if condition="$row.service_class eq $v.id"}selected{/if}>{$v.title}</option>
                    {/volist}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">服务产品名称</label>
            <div class="layui-input-block">
                <input type="text" name="title" class="layui-input" placeholder="请输入服务产品名称" value="{$row.title|default=''}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">服务LOGO</label>
            <div class="layui-input-block layuimini-upload">
                <input name="image" class="layui-input layui-col-xs6" readonly  placeholder="请上传服务LOGO" value="{$row.zhu_img|default=''}">
                <div class="layuimini-upload-btn">
                    <span><a class="layui-btn" data-upload="image" data-upload-number="one" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">服务轮播</label>
            <div class="layui-input-block layuimini-upload">
                <input name="logo" class="layui-input layui-col-xs6" lay-verify="required" placeholder="请上传轮播图片" value="{$row.lun_img|default=''}">
                <div class="layuimini-upload-btn">
                    <span><a class="layui-btn" data-upload="logo" data-upload-number="more" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">多规格</label>
            <div class="layui-input-block">
                <input type="hidden"  name="spec_value" id="spec_value"/>
                <input type="hidden"  name="spec" id="spec"/>
                <div id="app">
                    <el-card class="box-card">
                        <el-form ref="form" :model="form" :inline="true" label-width="80px" >
                            <div style="margin-bottom: 20px;" v-if="isAddInp">
                                <el-button type="primary" size="mini" @click="addNewGui">添加新规格</el-button>
                            </div>
                            <div v-else>
                                <el-form-item label="规格：">
                                    <el-input v-model="form.ggkey" placeholder="请输入规格名" maxlength="30" minlength="1"></el-input>
                                </el-form-item>
                                <el-form-item label="规格值：">
                                    <el-input v-model="form.ggval" placeholder="请输入规格值"  maxlength="30" minlength="1"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="submit_btn">确定</el-button>
                                </el-form-item>
                            </div>
                        </el-form>
                        <div v-for="(item,index) in guigDataArr" v-if="guigDataArr.length>0">
                            <div style="margin-top: 10px;" >{{item.ggkeyname}} <i class="el-icon-circle-close" @click="remove_guigDataArr(index)"></i></div>
                            <div style="margin-top: 10px;display: flex;">
                                 <el-button  v-for="(item_val,index_val) in item.ggvalArr" type="primary" plain size="mini" >
                                      {{item_val}}<i class="el-icon-circle-close" @click="remove_ggvalArr(item,index_val)"></i>
                                 </el-button>

                                <el-button plain size="mini" v-if="!item.isShowInp"  @click="handleAddGui(item)">+添加</el-button>
                                <div v-else style="width: 100px;margin-left: 20px;">
                                     <el-input size="mini" v-model="item.inpVal"  maxlength="10" minlength="1" type="text" @blur="addGuiBlur(item,index)"></el-input>
                                </div>
                            </div>
                        </div>
                        <div style="margin-top:40px;">
                            <div style="font-weight: bold">规格列表:</div>
                            <el-table
                                    :data="tableData"
                                    border
                                    style="width: 100%">

                                <el-table-column
                                        header-align="center"
                                        width="80px"
                                        align="center"
                                        v-for="item in guigDataArr" :key="item.ggkeyname"
                                        :label="item.ggkeyname">
                                    <template slot-scope="{row}">
                                        {{row[item.ggkeyname]}}
                                    </template>
                                </el-table-column>

                                <el-table-column
                                        align="center"
                                        header-align="center"
                                        label="价格">
                                    <template slot-scope="{row}">
                                        <div >
                                            <el-input v-model="row.jg" type="number" max="10000" min="0" @change="handleChange"></el-input>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="date"
                                        header-align="center"
                                        align="center"
                                        label="库存">
                                    <template slot-scope="{row}">
                                        <div >
                                            <el-input v-model="row.kc" type="number" max="10000" min="0" @change="handleChange"></el-input>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="date"
                                        align="center"
                                        header-align="center"
                                        label="操作">
                                    <template slot-scope="{row}">
                                        <div style="width: 80px;">
                                            <el-button type="text" @click="deleteRow(row.id)">删除</el-button>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-card>
                </div>
                <script>
                    new Vue({
                        el: '#app',
                        data: function() {
                            return {
                                isAddInp:true,
                                form:{
                                    ggkey:'',
                                    ggval:''
                                },
                                guigDataArr:[],
                               tableData:[]
                            }
                        },
                        created(){
                            var spec_value = <?=json_encode($spec_value)?>;
                            var spec = <?=json_encode($spec)?>;
                            spec_value.map((item,index)=>{
                                var obj = {
                                    jg:item.price,
                                    kc:item.stock,
                                    id:index,
                                }
                                var specs_list = item.specs_list
                                for (var key in specs_list){
                                    Object.assign(obj,{
                                        [key]:specs_list[key]
                                    })
                                }
                                this.tableData.push(obj)
                            })
                            this.guigDataArr = []
                            for (var key in spec){
                                this.guigDataArr.push({
                                    ggkeyname:key,
                                    ggvalArr:spec[key],
                                    isShowInp:false,
                                    inpVal:''
                                })
                            }
                            this.handleChange()
                        },
                        methods:{
                            handleChange(){
                                spec_value = []
                                this.tableData.map((item,index)=>{
                                    var obj = {
                                        specs_list:{}
                                    }
                                    for (var key in item){
                                        if(key == 'jg'){
                                            obj.price = item.jg
                                        }else if(key == 'kc'){
                                            obj.stock = item.kc
                                        }else {
                                            obj.specs_list[key] = item[key]
                                        }
                                    }
                                    spec_value.push(obj)
                                })
                                var spec = {}
                                this.guigDataArr.map(item=>{
                                    var obj = {
                                        [item.ggkeyname]:item.ggvalArr
                                    }
                                    Object.assign(spec,obj)
                                })
                                document.getElementById('spec_value').value = JSON.stringify(spec_value)
                                document.getElementById('spec').value = JSON.stringify(spec)
                            },
                            addGgval(){
                                    this.tableData = []
                                    let result=[{}]
                                    if(this.guigDataArr.length===0){

                                    }else {
                                        this.guigDataArr.map(x=>{
                                            let res=[]
                                            result.map(y=>{
                                                x.ggvalArr.map(z=>{
                                                    res.push({...y,[x.ggkeyname]:z})
                                                })
                                            })
                                            result=res
                                        })
                                        result.map((item,index)=>{
                                            this.tableData.push(Object.assign(item,{
                                                id:index,
                                                jg:'',
                                                kc:'',
                                            }))
                                        })
                                    }
                            },
                            addNewGui(){
                                this.isAddInp = false
                            },
                            submit_btn(){
                                var ggname = this.form.ggkey.trim()
                                var ggval = this.form.ggval.trim()
                                if(ggname!=='' && ggval!==''){
                                    var index = this.guigDataArr.findIndex(d=>{
                                        return d.ggkeyname === ggname
                                    })
                                    if(index!==-1){
                                        this.$message({
                                            message: '规格名不能重复',
                                            type: 'warning'
                                        });
                                    }else {
                                        this.guigDataArr.push({
                                            ggkeyname:ggname,
                                            ggvalArr:[ggval],
                                            isShowInp:false,
                                            inpVal:''
                                        })
                                        this.isAddInp = true
                                        this.form.ggkey = ''
                                        this.form.ggval = ''

                                        this.addGgval()
                                    }
                                }
                            },
                            handleAddGui(item,index){
                                item.isShowInp = true
                            },
                            addGuiBlur(item,index){
                                var inpVal = item.inpVal.trim()
                                if(inpVal!==''){
                                    var indexof = item.ggvalArr.indexOf(inpVal)
                                    if(indexof!==-1){
                                        this.$message({
                                            message: '规格值不能重复',
                                            type: 'warning'
                                        });
                                    }else {
                                        item.ggvalArr.push(inpVal)
                                        item.isShowInp = false
                                        item.inpVal = ''
                                        this.addGgval()
                                    }
                                }
                            },
                            remove_ggvalArr(item,i_val){
                                if(item.ggvalArr.length>1){
                                    item.ggvalArr.splice(i_val,1)
                                    this.addGgval()
                                }else {
                                    this.$message({
                                        message: '不能删除最后一个',
                                        type: 'warning'
                                    });
                                }
                            },
                            remove_guigDataArr(i){
                                this.guigDataArr.splice(i,1)
                                this.addGgval()
                            },
                            deleteRow(id){
                                this.tableData.splice(id,1)
                            },
                        },
                        watch:{

                        }
                    })
                </script>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">服务标签</label>
            <div class="layui-input-block">
                <input type="text" name="server_label" class="layui-input" placeholder="请输入服务标签，多个用','相隔" value="{$row.server_label|default=''}">
            </div>
        </div>
  
        <div class="layui-form-item">
            <label class="layui-form-label required">服务详情</label>
            <div class="layui-input-block">
                <textarea name="desc" rows="20" class="layui-textarea editor" placeholder="请输入服务详情">{$row.desc|default=''}</textarea>
            </div>
        </div>

        <div class="hr-line"></div>
        <div class="layui-form-item text-center">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
        </div>
    </form>
</div>
<script type="text/javascript">
    layui.use(['form','upload'], function(){
        var form = layui.form;
        var upload = layui.upload;
        $ = layui.$;
        layer = layui.layer;
        //各种基于事件的操作。
        $('#addrs').click(function (){
            var i = $('#rsbox >div').length
            $('#rsbox').append(`<div><input type="text" class="layui-input" placeholder="请输入人数"></div>`)
            $('#rsbox>div:last-child input').bind('change', setrsinp)
            setrsinp()
        })
        function setrsinp(){
            var str = ''
            $('#rsbox >div').map((item,index)=>{
                str += $(index).find('input').val()+','
            })
            str = str.slice(0,-1)
            $('#rsinp').val(str)
        }
        function setscinp(){
            var str = ''
            $('#scbox >div').map((item,index)=>{
                str += $(index).find('input').val()+','
            })
            str = str.slice(0,-1)
            $('#scinp').val(str)
        }
        $('#addsc').click(function (){
            var i = $('#scbox >div').length
            $('#scbox').append(`<div><input type="text" class="layui-input" placeholder="请输入时间"></div>
`)
            $('#scbox>div:last-child input').bind('change', setscinp)
            setscinp()
        })
        $('#scbox>div:last-child input').bind('change', setscinp)
        $('#rsbox>div:last-child input').bind('change', setrsinp)
        $('#removers').click(function (){
            var lastEl =  $('#rsbox').children().last()
            var count = $('#rsbox >div').length
            if(count>1){
                lastEl.remove()
            }else {
                layer.msg('不能删除最后一个')
            }
            setrsinp()
        })
        $('#removesc').click(function (){
            var lastEl =  $('#scbox').children().last()
            var count = $('#scbox >div').length
            if(count>1){
                lastEl.remove()
            }else {
                layer.msg('不能删除最后一个')
            }
            setscinp()
        })

    });
</script>
